body {
  font-size: 36px;
  text-align: center;
}

.day_background {
  background-color: #000000;
}

.day {
  position: absolute;
  left: 0px;
  top: 0px;
  float: left;
  height: 100%;
  width: 80%;
  font-family: CustomFont00222, Arial;
  background-color: #000000;
  color: #ffffff;
}

.night_background {
  background-color: #ffffff;
}

.night {
  position: absolute;
  left: 0px;
  top: 0px;
  float: left;
  width: 80%;
  font-family: CustomFont00222, Arial;
  background-color: #ffffff;
  color: #000000;
}

.day_small,.night_small {
  position: relative;
  float: right;
  width: 20%;
  font-size: 50%;
}

.day_tiny,.night_tiny {
  position: relative;
  text-align: center;
  width: 100%;
  font-size: 20%;
}

.day_small_page,.night_small_page {
  position: relative;
  text-align: center;
  width: 100%;
  font-size: 50%;
}

@media screen and (max-width: 2400px) {
  .day,.night {
    font-size: 1200%;
  }
  .day_small,.night_small {
    position: relative;
    float: right;
    height: 100%;
    width: 20%;
    font-size: 500%;
  }
}

@media screen and (max-width: 2200px) {
  .day,.night {
    font-size: 1100%;
  }
  .day_small,.night_small {
    position: relative;
    float: right;
    height: 100%;
    width: 20%;
    font-size: 450%;
  }
}

@media screen and (max-width: 1200px) {
  .day,.night {
    font-size: 600%;
  }
  .day_small,.night_small {
    position: relative;
    float: right;
    width: 20%;
    font-size: 250%;
  }
}

@media screen and (max-width: 900px) {
  .day,.night {
    font-size: 450%;
  }
  .day_small,.night_small {
    position: relative;
    float: right;
    height: 100%;
    width: 20%;
    font-size: 175%;
  }
}